

生命周期

状态提升


过滤器

自定义指令
Vue.directive("", () => {

})

插件

生命周期从开始到销毁的过程

需求: 生命周期的某些使用钩子函数

/* 
初始 模板 挂载 更新 卸载

new Vue（）
初始 事件系统 和 生命周期
beforeCreate（）拿不到数据
初始 数据劫持 数据代理 
create（）拿的到数据

el $mount 过载
template  模板
生成虚拟dom

beforeMoount（）
替换替换容器 将虚拟dom变为真实dom
mounted（）

beforeUpdate（）
虚拟dom再渲染 patch
updated（）

beforeDestroy（）

Destroy（）

父子组件生命周期
父bc c bemount
zibc c bemount
mount

父 beu 子beu
父 up 子up

Porps通信 子传父
父组件 封装函数 接受数据  形参是传来的值 
子组件 调用函数 发送数据  实参是要传的值

子传父 vue提供写法 自定义事件

Lodash
开发工具包 深拷贝 节流
import _ from 'Lodash'

自定义事件
在父组件中
@XXX="父的函数"
回调函数
给子组件绑定自定义事件
子组件通过api
this.$emit("自定义事件的名字",附加参数)

组件通信

1.props  父传子

2.自定义事件 子传父
@XXX
this.ref.$on("XXX
")

3.pubsurb 任意通信

4.事件总线($bus) 任意组件通信
在main文件
在beforecreate生命周期
vue的原型对象上放一个￥bur属性

todolist（事件总线版）
把数据放在List中
截数据 写事件函数 


插槽
<slot/>
每一个插槽都应该有name名字
v-slot 简写为#XXX 向插槽中插入内容
默认插槽
具名插槽
作用域插槽

Vuex
新建store文件
引入vue
引入vueX
使用vueX插件
暴漏 使用vueX 创建store仓库 参数是配置对象


Vuex插件 配置对象 需要参数
state对象
-----------
  count: 1,
  price: 9,
  movieList: []
  ----------
mutation对象
-------------
  //主要用来写改变状态的函数 所以它的第一个参数就是状态 state
  //然而在mutations中必须写同步函数 异步需要借助actions中转处理 
  incrementN(state, { n, type }) {
    //现在要修改状态
    state.count += n
    alert(type)
  },
-----------
actions对象
----------------
  //因为actions中一定会调用commit去调用mutation,所以action中的函数,接受一个对象,对象中提供一个commit方法
    async getMovie({ commit }) {
    const re = await axios.get("https://pcw-api.iqiyi.com/search/recommend/list?channel_id=1&data_type=1&mode=11&page_id=2&ret_num=48&session=b9fd987164f6aa47fad266f57dffaa6a")
    //异步请求回来的数据交给mutations处理  payload
    commit("setMovieList", re.data.data.list)
  }
----------------
getters对象
-------------------------
//对state状态进行再一步细化 如何 渲染列表时 加上特殊条件 如渲染100条数据并要求偶数条渲染两次
  // 因为要细化state所以第一次参数是计算state
  filterMovie(state) {
    return state.movieList.filter((item) => {
      return item.albumName.length >= 4 && item.albumName.length < 5
    })
  },
------------------------

##模块化
拆分以下对象到各个文件
state
mutation
actions
getters
新建idnex.js 引入 个个对象
在store文件夹引入count模块
new Vuex
 modules{count：count}
 nameSpro: true
mapXX("模块名称",[""])

//异步
分发 
action
mutations
改state
render

###本地存储
session storege ----临时储存
local storege ---持久化储存
cookile -- 客户端存储

###vueX数据持久化
1.原生实现
1.1在保存数据的state中 
使用localStorage.getItem（'XXX'）
去mutation中
localStorage.setItem（'XXX'，state）

2.插件实现 --vuex-persistedstate
2.1下包npm install vuex-persistedstate --save
2.2引入vuex-persistedstate
2.3在store配置 的pluggin 中 使用vuex-persistedstate

###Vuex 路由
单页面应用
不刷新
加载不同视图
路由器 管理路由的
router
route
--------------
路由模式
---1hash路由 #锚链接
原生实现
1.创建路由表，规定路由对应信息
监听地址
遍历按钮绑定事件
onhashchange 监听hash
比较当前hash 和路由表 
更新视图 

----2history路由
history.pustate方法改变浏览器地址不刷新页面

Vuex 路由工具
下包npm i vue-router@3
创建page路由文件夹 组件文件
创建route文件夹 路由表文件
引入vue
引入vueRouter
引入路由组件
使用vueRouter插件
创建路由器对象
配置路由对象
在main引入route 并在Vue中挂载route 扩展$route
在APP中布置标签 <router-view> //组件占位符

缓存路由组件 <keep-alive :include="['XX','XX']"> 包裹<router-view> 
为什么？--缓存路由组件
:路由切换是组件挂载1卸载 路由切换频繁 不要老是挂载卸载
使用缓存路由组件 <keep-alive>包裹
默认包裹 所有组件被缓存
所有缓存 没必要 include 指定缓存
keep-alive 只会缓存当前包裹的组件 不会深层次的缓存

组件嵌套
<router-link :to=" ">
<router-link :to="{path:'/XX/XX'} ">
<router-link :to="{name:'XX'} ">

重定向
redirect属性

1.路由的push与replace？
push
this.$router.push
replace
this.$router.replace

复习8.5
1vuex中数据持久化

2路由模式原生
hash模式与history模式
 哈希值 #不刷新
hash模式
location.hash = URL
window.onhashchange=()=>{
  改变视图
}
history模式
history.pushState 事件
改变游览器地址,不刷新页面
window.onpopState
监听 location.pathname 做历史记录

3vueRouter基础配置
.............
4keep-alice 缓存路由组件
5router-link的三种写法
6路由重定向
7动态路由
三种传参方式
params params xxx/：id/:time?   如果params传值 直接传递的是一个对象  则在路由表配置 时 不需要使用动态params参数
query
props

8编程式路由导航
作用：不借助<router-link> 实现路由跳转，我们还可以借助 router 的实例方法，通过编写代码来实现让路由跳转更加灵活
$router.push：编程式路由导航,留下历史记录
$router.replace:编程式路由导航,替换当前历史记录
$router.forward:历史记录前进一页
$router.back:历史记录后退一页
$router.go:历史记录前进或者后退

路由元信息
meta 属性 路由自带的属性 内容

异步组件:打包的时候没开打包，初始化的时候不会引入这个文件
webpack打包 一起全部打包
懒加载 分开打包组件 首次加载文件小
路由懒加载原理

懒加载操作手册
先在路由表中 把引入组件的方式 改为 import 引入
在routes components中注册 

import函数


      如果Header是异步组件:
        异步组件:打包的时候分开打包,初始化的时候不会引入这个文件(比如用在路由懒加载,首屏优化)
        原理:
          - 不需要使用import模块化引入组件,否则会一起打包
          - 在注册组件的时候,后边跟一个函数,当被注册的组件被使用的时候,会调用这个函数
          - 注册组件后如果跟的是一个函数,则希望返回一个promise实例(因为是异步加载,所以需要获取加载的状态)
          - 在函数中又能引入其他模块,并且还能返回promise实例,只有ES6提供的import方法
          
    


13. replace 属性
控制声明式路由导航时操作浏览器历史记录的模式
浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
如何开启replace模式：<router-link replace .......>News</router-link>

14. history模式
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

-------------------
Vue响应式原理
1数据代理
  // 我们配置的数据放在了vm的_data身上
  // 因为this也好, 插值也好, 都是直接找的vm对象, 所以每次拿数据都要通过vm._data来拿
  // 所以我们希望把_data上的属性, 在vm中放一份, 我们读取和修改都是直接操作的是vm身上的数据
  // vm身上的数据被获取或者被修改的时候, 会通知_data去读或者该值
  // 以上的操作就是数据代理的操作
2数据劫持 响应式数据 reacttivegetter
为了捕获数据的改变
观察者模式 发布与订阅

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   































 */




